<script setup>
import { formatNumber } from '@/utils'

defineProps({
  item: {
    type: Object,
    required: true,
  },
})
</script>

<template>
  <el-card footer-class="custom-card-footer " class="mb-20">
    <div class="flex-col">
      <div class="flex items-center">
        <UserPopover show-arrow :info="item.from" trigger="hover" show-button>
          <el-avatar
            :src="item.from.avatar"
            alt="头像"
            class="mr-10 cursor-pointer"
          />
        </UserPopover>
        <div>
          <UserPopover show-arrow :info="item.from" trigger="hover" show-button>
            <span class="line-clamp-1 cursor-pointer fw-black">
              {{ item.from.nickName }}
            </span>
          </UserPopover>
          <span class="line-clamp-1 font-size-14 op-text">
            <span> {{ item.from.job }} </span>
            <span>&nbsp;·&nbsp;</span>
            <span> {{ item.releaseTime }} </span>
          </span>
        </div>
      </div>
      <div class="pl-48 pr-10">
        <ContentCollapse :content="item.content" />
        <div class="mt-10">
          <el-image
            v-for="(url, index) in item.picList"
            :key="index"
            lazy
            show-progress
            :preview-src-list="item.picList"
            :initial-index="index"
            style="
              width: 100px;
              height: 100px;
              margin-right: 10px;
              display: inline-block;
            "
            :src="url"
            fit="cover"
            class="border-rd-5"
            :preview-teleported="true"
          />
        </div>
      </div>
    </div>
    <template #footer>
      <div class="flex op-text us">
        <div class="f-c-c flex-1 border-r-1 cursor-pointer-bg-hover">
          <i v-if="!item.isLike" class="i-fe:thumbs-up mr-2" />
          <i v-else class="i-garden:thumbs-up-fill-12 mr-2 bg-primary" />
          <span>{{ formatNumber(item.articleMetric.likeCount) }}</span>
        </div>
        <div class="f-c-c flex-1 border-r-1 cursor-pointer-bg-hover">
          <i class="i-fe:message-square mr-2" />
          <span>{{ formatNumber(item.articleMetric.commentCount) }}</span>
        </div>
        <div class="f-c-c flex-1 cursor-pointer-bg-hover">
          <i class="i-fe:share mr-2" />
          <span>分享</span>
        </div>
      </div>
    </template>
  </el-card>
</template>

<style scoped>
:deep(.el-card__footer.custom-card-footer) {
  padding: calc(var(--el-card-padding) - 15px) var(--el-card-padding);
}
</style>
